import axios from 'axios'
import React, { Component } from 'react'
import PubSub from 'pubsub-js'

export default class Search extends Component {

// 处理点击搜索获取信息
handleGetData =()=>{
    const { getData } = this
    console.log(this.props)
    const { updateState } = this.props
    // 发送请求前更新数据
    PubSub.publish("updateState",{isFirst: false, isLoding: true })
    console.log(getData.value)
    // 发送请求，获取数据
    axios.get("https://api.github.com/search/users?q=" + getData.value).then(
        response => {
            console.log("成功", response.data.items)
            // 请求成功后发布订阅，通知list更新状态
            PubSub.publish("updateState",{ userData: response.data.items, isFirst: false, isLoding: false })
        },
        // 错误时返回的数据
        error => {
            console.log("失败")
            PubSub.publish("updateState",{ err: error.message, isFirst: false, isLoding: false })
        }
    )
}

render() {
    return (
        <section className="jumbotron">
            <h3 className="jumbotron-heading">Search Github Users</h3>
            <div>
                <input ref={c => this.getData = c} type="text" placeholder="enter the name you search" />&nbsp;
                <button onClick={this.handleGetData}>Search</button>
            </div>
        </section>
    )
}
}
